<template>
  <div class="block">
    <el-row :gutter="20" style="margin-top: 20px">
      <el-col :span="8" :xs="24">
        <el-card class="box-card">
          <el-tag type="success" style="font-weight: bold;font-size: 20px;margin-bottom: 5px">系统简介</el-tag>
          <p style="font-weight: bold;font-size: 15px;margin-top: 5px">这是一个人力资源管理系统, 功能如下</p>
          <p style="font-weight: bold;font-size: 15px;text-align: center">系统管理</p>
          <p style="font-weight: bold;font-size: 15px;text-align: center">履历管理</p>
          <p style="font-weight: bold;font-size: 15px;text-align: center">人事管理</p>
          <p style="font-weight: bold;font-size: 15px;text-align: center">薪酬管理</p>
          <p style="font-weight: bold;font-size: 15px;text-align: center">考核管理</p>
          <p style="font-weight: bold;font-size: 15px;text-align: center">培训管理</p>
          <p style="font-weight: bold;font-size: 15px;text-align: center">考勤管理</p>
        </el-card>
      </el-col>

      <el-col :span="16" :xs="24">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <el-tag type="success" style="font-weight: bold;font-size: 20px;margin-bottom: 2px">公告</el-tag>
              <el-button v-if="roles.includes('admin')" class="button" type="primary" style="float: right;margin-right: 10px" @click="addNotice">新建公告</el-button>
            </div>
          </template>
          <div v-for="(item, index) in noticeList" :key="index">
            <el-card class="box-card" style="margin: 5px">
              {{ item.content }}
              <el-button v-if="roles.includes('admin')" style="float: right;margin: 10px" type="primary" icon="el-icon-edit" circle @click="editNotice(item)"></el-button>
              <el-button v-if="roles.includes('admin')" style="float: right;margin: 10px" type="danger" icon="el-icon-delete" circle @click="removeNotice(item.id)"></el-button>
            </el-card>
          </div>
        </el-card>
      </el-col>
      <el-dialog :visible.sync="dialogVisible" :title="dialogType==='edit'?'修改':'创建'">
        <el-form :model="notice" label-width="80px" label-position="left">
          <el-form-item label="内容">
            <el-input v-model="notice.content" placeholder="内容"/>
          </el-form-item>
        </el-form>
        <div style="text-align:right;">
          <el-button type="danger" @click="dialogVisible=false">取消</el-button>
          <el-button type="primary" @click="confirm">确定</el-button>
        </div>
      </el-dialog>
    </el-row>
  </div>
</template>

<script>
import { getNotice, modifyNotice, removeNotice, addNotice} from '@/api/notice'
import { mapGetters } from 'vuex'
const defaultNotice = {
  id: ''
}
export default {
  name: 'Notice',
  computed: {
    ...mapGetters([
      'roles'
    ])
  },
  data() {
    return {
      notice: Object.assign({}, defaultNotice),
      noticeList: [],
      dialogVisible: false,
      dialogType: 'new',
    }
  },
  created() {
    this.getNotices()
  },
  methods: {
    async getNotices() {
      const res = await getNotice()
      this.noticeList = res.data
    },
    addNotice() {
      this.dialogType = 'new'
      this.notice = Object.assign({}, defaultNotice)
      this.dialogVisible = true
    },
    editNotice(notice) {
      this.dialogType = 'edit'
      this.dialogVisible = true
      this.notice = notice
    },
    async confirm() {
      if ('edit' === this.dialogType) {
        await modifyNotice(this.notice.id, this.notice)
      }else {
        await addNotice(this.notice)
      }
      await this.getNotices()
      this.dialogVisible = false
      this.$notify({
        title: 'Success',
        dangerouslyUseHTMLString: true,
        message: '操作成功',
        type: 'success'
      })
    },
    async removeNotice(id) {
      removeNotice(id)
      await this.getNotices()
    }
  }
}
</script>

<style scoped>

</style>
